<template>
	<view>
		<picker mode="multiSelector" :range="addressArr" @change="pickerChange" :value="value" @columnchange="columnchange" :disabled='disabled' @cancel='cancel'>
			<view class="select-time">
				<slot></slot>
			</view>
		</picker>
	</view>
</template>

<script>
	import addressList from "@/static/js/address.js"
	export default {
		data() {
			return {
				addressArr:[],
				cityList:[],
				areaList:[],
				value:'',
				provinceIndex:0,
				cityIndex:0,
				areaIndex:0,
			};
		},
		props: {
			defaultProvince:{
				type: String,
				default: '广东省'
			},
			defaultCity: {
				type: String,
				default: '深圳市'
			},
			defaultaArea: {
				type: String,
				default: '南山区'
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		computed:{
			provinceList(){
				let list=[]
				for(let a=0;a<addressList.length;a++){
					list.push(addressList[a].name)
				}
				return list
			},
		},
		mounted() {
			this.init()
		},
		watch: {
			defaultaArea(newValue, oldValue) {
				this.init()
			}
		},
		methods:{
			cancel(e){
				this.value=[this.provinceIndex,this.cityIndex,this.areaIndex]
			},
			init(){
				this.addressArr=[]
				this.addressArr.push(this.provinceList)
				this.provinceIndex=this.provinceList.indexOf(this.defaultProvince)
				let cityList=[],areaList=[]
				for(let a=0;a<addressList[this.provinceIndex].list.length;a++){
					cityList.push(addressList[this.provinceIndex].list[a].name)
				}
				this.cityList=cityList
				this.cityIndex=cityList.indexOf(this.defaultCity)
				this.addressArr.push(this.cityList)
				for(let a=0;a<addressList[this.provinceIndex].list[this.cityIndex].list.length;a++){
					areaList.push(addressList[this.provinceIndex].list[this.cityIndex].list[a].name)
				}
				this.areaList=areaList
				this.areaIndex=areaList.indexOf(this.defaultaArea)
				this.addressArr.push(this.areaList)
				this.value=[this.provinceIndex,this.cityIndex,this.areaIndex]
			},
			pickerChange(e){
				let data={}
				data.province=this.provinceList[e.detail.value[0]]
				data.city=this.cityList[e.detail.value[1]]
				data.area=this.areaList[e.detail.value[2]]
				if(data.province.indexOf('市')!=-1){
					data.fullPath=data.province+data.area
				}else if(data.city.indexOf('省直辖县级行政区划')!=-1||data.city.indexOf('自治区直辖县级行政区划')!=-1){
					data.fullPath=data.province+data.area
				}else{
					data.fullPath=data.province+data.city+data.area
				}
				this.$emit('pickerConfirm',data)
			},
			columnchange(e){
				const column = e.detail.column
				const index = e.detail.value
				if (column == 0) {
					this.provinceIndex=index
					this.getCityList()
					this.getAreaList()
				}
				if (column == 1) {
					this.cityIndex=index
					this.getAreaList()
				}
				if (column == 2) {
					this.areaIndex=index
				}
			},
			getCityList(){
				let list=[]
				for(let a=0;a<addressList[this.provinceIndex].list.length;a++){
					list.push(addressList[this.provinceIndex].list[a].name)
				}
				this.addressArr.splice(1, 1, list)
				this.cityList=list
			},
			getAreaList(){
				let list=[]
				for(let a=0;a<addressList[this.provinceIndex].list[this.cityIndex].list.length;a++){
					list.push(addressList[this.provinceIndex].list[this.cityIndex].list[a].name)
				}
				this.addressArr.splice(2, 1, list)
				this.areaList=list
			}
		}
	}
</script>

<style lang="scss">

</style>
